<template>
    <div class="p-2 text-gray-500">下载排行榜</div>
    <div class="bg-white p-2">
        <el-row>
            <el-col :span="12" class="p-3">
                <div :style="{ height: '300px' }">
                    <CarouselCard :interval="3000" :autoplay="true" :height="'300px'" type="card" arrow="always"
                        @change="changeHandle">
                        <CarouselCardItem v-for="(item, index) in HotDonwloadList" :key="index" :name="`cc_${index}`">
                            <div style="height: 100%">
                                <el-image class="rounded" style="width: 100%; height: 100%;" :src="baseUrl + item.image" />
                            </div>
                        </CarouselCardItem>
                    </CarouselCard>
                </div>
                <div class="text-center text-gray-700 text-lg mt-12 font-weight">尖叫新歌榜</div>
                <div class="text-center text-gray-300 text-sm mt-3">每小时更新</div>
                <div class="flex justify-center mt-6">
                    <div class="pointer border-2 rounded-xl pl-4 pr-4 pt-1 pb-1 text-gray-700"><span
                            class="iconfont">&#xe61c;</span>播放榜单</div>
                </div>
            </el-col>
            <el-col :span="12" class="p-3 flex flex-col">
                <div class=" flex justify-end text-gray-700">
                    <el-space class="text-sm" :size="30">
                        <span class="pointer" v-for="(item, index) in scenesList"
                            @click="selNewSongStyle(item, index)">{{ item.name }}</span>
                    </el-space>
                </div>
                <div class="grow p-3 text-gray-500" style="overflow-y: auto;height: 0;scrollbar-width: none;">
                    <el-row v-for="(item, index) in newSongList" :key="index" class="mb-3">
                        <el-col :span="1" class="flex items-center justify-center">{{ index + 1 }}</el-col>
                        <el-col :span="3" class="flex items-center justify-center">
                            <el-image :src="baseUrl + item.image" class="rounded-lg" style="width:60px;height:60px;" />
                        </el-col>
                        <el-col :span="16" class="flex items-center p-3">
                            <span>{{ item.title }}</span>
                        </el-col>
                        <el-col :span="4" class="flex items-center p-3">
                            <span class="text-gray-300">{{ item.duration }}</span>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import { CarouselCard, CarouselCardItem } from 'vue-carousel-card'
import test from "@/assets/imgs/1.webp";
import { ref, computed, onMounted, watch } from "vue";
import { indexHotDonwload, scenesIndex, indexNewMusic } from "@/http/api";

const HotDonwloadList = ref([]);
const scenesList = ref([]);
const newSongList = ref([]);
const baseUrl = import.meta.env.VITE_API_URL;
onMounted(() => {
    getHotDonwload();
    getScenesList();
    getNewMusic();
});

const getNewMusic = async (e) => {
    const { data } = await indexNewMusic({
        scenes: e?.id,
    });
    newSongList.value = data.data;
};

const selNewSongStyle = (e, i) => {
    //写切换的样式
    console.log(e)
    getNewMusic(e);
};

// 
const getScenesList = async () => {
    const { data } = await scenesIndex();
    scenesList.value = data.scenes;
    console.log(data);
};

const timeFilter = (e) => {
    let timeFormat = "00:00";
    if (e) {
        let minutes = Math.floor(e / 60);
        let second = e % 60;
        timeFormat =
            minutes.toString().padStart(2, "0") +
            ":" +
            second.toString().padStart(2, "0");
    }
    return timeFormat;
};

// 热门下载
const getHotDonwload = async () => {
    const { data } = await indexHotDonwload();
    HotDonwloadList.value = data.data;
};
const changeHandle = function () {

}
</script>
<style scoped>
.container {
    width: 1440px;
}

.pointer {
    cursor: pointer;
}
</style>